<template>
  <div class="datacard-container">
    温度数据:{{ temperature }}℃
    <!-- FIXME: 若要允许自己关闭，需要与触发其打开的marker相关联 -->
    <button v-if="props.enableSelfClose" @click="handleClose">关闭</button>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
const props = defineProps({
  enableSelfClose: {
    type: Boolean,
    default: false
  }
})

const temperature = ref(0)
let interval = null
onMounted(() => {
  interval = setInterval(() => {
    temperature.value = Math.floor(Math.random() * 100)
  }, 1000)
})
const emit = defineEmits(['close']);

const handleClose = () => {
  console.log('HANDLE-CLOSE触发')
  interval && clearInterval(interval)
  emit('close')
}
defineExpose({
  handleClose
})

</script>

<style lang="scss" scoped>
$calcHeight: 100px;
$calcWidth: calc(410 / 224 * #{$calcHeight});

.datacard-container {
  width: $calcWidth;
  height: $calcHeight;
  background-image: url(/static/bkg_warning.png);
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  cursor: pointer;
}
</style>
